<template>
    <div class="shopcar">
        <!-- 商品列表区 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                   <mt-switch ></mt-switch>
                   <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/53e643573e3abeef36f6b6d3684519ea.jpg" >
                   <div class="info">
                       <h1>标题</h1>
                       <p>
                           <span class="price">$2199</span>
                           <input type="button" value="-" @click="minus"><input type="text" v-model="$store.state.count" class="num"><input type="button" value="+" @click="add">
                           <!-- 问题：如何从购物车中获取商品的数量呢 -->
                           <!-- 先创建一个空对象，然后循环购物车中所有商品的数据，把当前循环这条商品的ID，作为对象的属性名,count值作为对象的属性值，这样，当把所有的商品循环一遍，就会得到有一个对象：{88:2,89:1,90:4} -->
                           <!-- @click.prevent="delete(11)" -->
                           <a href="" >删除</a>
                        </p>
                   </div>
                </div>
            </div>
        </div>
        <!-- 结算区 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //goodslist:[]
        }
    },
    methods: {
          minus(){
             this.$store.commit('minus');
        },
        add(){
            this.$store.commit('increment');
        },
        // getgoodslist(){
        //     var idarr=[];
        //     this.$store.state.car.forEach(item=>idarr.push(item.id));
        //     if(idarr.length<=0){
        //         return;
        //     }
        //     this.$http.get("url"+idarr.join(",")).then(result=>{
        //         if(){
                        //if (result.body.status====0) {
                            
                        //}
        //         }
        //     });
        // }
        // getGoodsCount(state){
        //     var o={}
        //     state.car.forEach(item=>{
        //         o[item.id]=item.count
        //     })
        // }
    },
}
</script>
<style lang="less">
.shopcar{
    background-color: #eee;
    overflow: hidden;
    .mui-card-content-inner{
        display: flex;
        align-items: center;
    }
    img{
        width: 60px;
        height: 60px;
    }
    h1{
        font-size: 15px;
    }
    .info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .price{
            color: red;
        }
    }
    .num{
        padding: 0;
        width: 50px;
        text-align: center;
    }
}

</style>
